<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MQuery 测试用例</title>
    <style>
        /* 基础样式 */
        body {
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .test-section h3 {
            margin-top: 0;
            color: #333;
        }

        /* 测试效果样式 */
        .test-class {
            color: blue;
        }

        .active {
            background-color: yellow;
        }

        .highlight {
            border: 2px solid red;
        }

        .clicked {
            background-color: #e0e0e0;
            transition: background-color 0.3s;
        }

        /* DOM操作测试区域样式 */
        .parent {
            padding: 15px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            background: #f9f9f9;
        }

        .child {
            margin: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            background: white;
        }

        /* 事件测试区域样式 */
        .event-area {
            background: #f5f5f5;
        }

        .event-section {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #eee;
            background: white;
        }

        button {
            padding: 8px 15px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #f0f0f0;
        }

        .success {
            color: green;
        }

        .error {
            color: red;
        }

        .test-result {
            margin: 5px 0;
            padding: 5px;
            font-size: 0.9em;
        }

        .counter {
            display: inline-block;
            margin-left: 10px;
            padding: 2px 8px;
            background: #eee;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <!-- DOM操作测试区域 -->
    <div class="test-section" id="dom-test">
        <h3>DOM 操作测试</h3>
        <div class="parent">
            <div class="child first">子元素1</div>
            <div class="child second special">子元素2</div>
            <div class="child third">子元素3</div>
            <p class="child fourth">子元素4</p>
        </div>

        <div class="another-parent">
            <div class="child">另一个父元素的子元素</div>
        </div>

        <form id="test-form">
            <input type="text" class="test-input" value="测试文本">
            <button type="button" class="test-button">测试按钮</button>
        </form>
    </div>

    <!-- 事件测试区域 -->
    <div class="test-section event-area">
        <h3>事件处理测试</h3>

        <!-- 基础事件测试 -->
        <div class="event-section">
            <h4>基础事件测试 <span class="counter" id="basic-counter">0</span></h4>
            <button class="btn-test">点击测试</button>
            <button class="btn-off">解绑事件</button>
            <div class="test-result" id="basic-event-result"></div>
        </div>

        <!-- 一次性事件测试 -->
        <div class="event-section">
            <h4>一次性事件测试 <span class="counter" id="once-counter">0</span></h4>
            <button class="btn-once">点击一次</button>
            <button class="btn-once-reset">重置测试</button>
            <div class="test-result" id="once-event-result"></div>
        </div>

        <!-- 事件委托测试 -->
        <div class="event-section">
            <h4>事件委托测试 <span class="counter" id="delegate-counter">0</span></h4>
            <button class="btn-add">添加新按钮</button>
            <button class="btn-clear">清空按钮</button>
            <div class="dynamic-buttons"></div>
            <div class="test-result" id="delegate-result"></div>
        </div>

        <!-- 自定义事件测试 -->
        <div class="event-section">
            <h4>自定义事件测试</h4>
            <button class="btn-trigger">触发自定义事件</button>
            <button class="btn-trigger-data">带数据触发</button>
            <div class="test-result" id="custom-event-result"></div>
        </div>
    </div>

    <script src="dom.js"></script>
    <script>
        function updateResult(id, message, isSuccess = true) {
            $(`#${id}`).html(
                `<span class="${isSuccess ? 'success' : 'error'}">${message}</span>`
            );
        }

        function updateCounter(id, value) {
            $(`#${id}`).text(value);
        }

        function runTests() {
            // 基础事件测试
            let basicCount = 0;
            const clickHandler = function (e) {
                basicCount++;
                updateCounter('basic-counter', basicCount);
                $(this).addClass('clicked');
                updateResult('basic-event-result', '事件触发成功');
                setTimeout(() => $(this).removeClass('clicked'), 300);
            };

            $('.btn-test').on('click', clickHandler);
            $('.btn-off').on('click', function () {
                $('.btn-test').off('click', clickHandler);
                updateResult('basic-event-result', '事件已解绑', false);
            });

            // 一次性事件测试
            let onceCount = 0;
            function setupOnceTest() {
                $('.btn-once').once('click', function (e) {
                    onceCount++;
                    updateCounter('once-counter', onceCount);
                    $(this).addClass('clicked');
                    updateResult('once-event-result', '一次性事件已触发，再次点击无效');
                    setTimeout(() => $(this).removeClass('clicked'), 300);
                });
            }

            setupOnceTest();
            $('.btn-once-reset').on('click', function () {
                setupOnceTest();
                updateResult('once-event-result', '测试已重置，可以重新点击');
            });

            // 事件委托测试
            let delegateCount = 0;
            $('.dynamic-buttons').delegate('click', '.dynamic-button', function (e) {
                console.log(this, e);
                // delegateCount++;
                // updateCounter('delegate-counter', delegateCount);
                // $(this).addClass('clicked');
                // updateResult('delegate-result', `按钮 ${$(this).text()} 被点击`);
                // setTimeout(() => $(this).removeClass('clicked'), 300);
            });

            $('.btn-add').on('click', function () {
                const btnCount = $('.dynamic-buttons .dynamic-button').elements.length + 1;
                $('.dynamic-buttons').html(
                    $('.dynamic-buttons').html() +
                    `<div>
                        测试用文案
                        <div>
                            测试用文案
                            <button class="dynamic-button">动态按钮 ${btnCount}</button>
                        </div>
                    </div>`
                );
            });

            $('.btn-clear').on('click', function () {
                $('.dynamic-buttons').html('');
                delegateCount = 0;
                updateCounter('delegate-counter', 0);
                updateResult('delegate-result', '已清空所有动态按钮');
            });

            // 自定义事件测试
            $('.btn-trigger')
                .on('customEvent', function (e) {
                    $(this).addClass('clicked');
                    updateResult('custom-event-result', '自定义事件触发成功');
                    setTimeout(() => $(this).removeClass('clicked'), 300);
                })
                .on('click', function () {
                    $(this).trigger('customEvent');
                });

            $('.btn-trigger-data')
                .on('customEvent', function (e) {
                    $(this).addClass('clicked');
                    updateResult('custom-event-result',
                        `收到数据：${JSON.stringify(e.detail)}`);
                    setTimeout(() => $(this).removeClass('clicked'), 300);
                })
                .on('click', function () {
                    $(this).trigger('customEvent', {
                        time: new Date().toLocaleTimeString(),
                        type: 'test'
                    });
                });
        }

        // 页面加载完成后运行测试
        window.onload = runTests;
    </script>
</body>

</html>